<template>
    <div class="container">
        <el-drawer v-model="props.modelValue" size="20%" :with-header="false"
            @close="$emit('update:modelValue', false)">
            <el-scrollbar class="main">
                <div class="drawer-title">界面调整</div>
                <el-form ref="formRef" label-position="top">
                    <el-form-item label="缩放" prop="size">
                        <div class="background-size"><el-slider v-model="interStore.size" :min="100" :max="200" /></div>
                    </el-form-item>
                    <el-form-item label="背景色" prop="backgroundColor">
                        <el-color-picker v-model="interStore.backgroundColor" @active-change="(val) => interStore.backgroundColor = val"
                            show-alpha />
                    </el-form-item>
                    <el-form-item label="字体颜色" prop="fontColor">
                        <el-color-picker v-model="interStore.fontColor" @active-change="(val) => interStore.fontColor = val" show-alpha />
                    </el-form-item>
                    <el-form-item label="背景图片" prop="size">
                        <el-scrollbar :max-height="backgroundImageMaxHeight">
                            <div class="background-image-item" v-for="item of interStore.backgroundImageList">
                                <el-icon class="close" :size="20" @click="interStore.delBackgroundImage(item.id)">
                                    <CirclePlus />
                                </el-icon>
                                <el-image :class="[interStore.backgroundImageId === item.id ? 'is-active' : '']"
                                    style="width: 100%" :src="item.url" fit="fill"
                                    @click="interStore.backgroundImageId = item.id" />
                            </div>
                        </el-scrollbar>
                        <div class="background-image-add" @click="uploadBackgroundImage">
                            <div class="icon">
                                <el-icon :size="30">
                                    <Plus />
                                </el-icon>
                            </div>
                            <div class="name">上传图片</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="" prop="">
                        <el-button class="btn" type="primary" @click="interStore.backgroundImageId = ''"
                            v-if="interStore.backgroundImageId">取消选择图片</el-button>
                        <el-button class="btn" type="primary" @click="interStore.exportInterfaceStore()">导出</el-button>
                        <el-button class="btn" type="primary" @click="interStore.importInterfaceStore()">导入</el-button>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { importImage } from '@/utils/exportImport'
import interfaceStore from "@/stores/interfaceStore"

const interStore = interfaceStore()

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

const backgroundImageMaxHeight = ref(0)

watch(() => props.modelValue, () => {
    setTimeout(updateBackgroundImageMaxHeight, 10)
})

/**
 * 上传背景图片
 */
const uploadBackgroundImage = () => {
    importImage((data) => {
        interStore.addBackgroundImage(data)
    })
}

/**
 * 更新背景图片列表高度
 */
function updateBackgroundImageMaxHeight() {
    var doc = document.getElementsByClassName("background-image-add")[0]
    if (!doc) {
        backgroundImageMaxHeight.value = '100px'
        return
    }
    backgroundImageMaxHeight.value = (doc.clientWidth / 16 * 9 + 20) * 2 + 'px'
}
</script>

<style scoped lang="scss">
:deep(.el-drawer .el-drawer__body) {
    padding: 0;
}

.main {
    padding: var(--el-drawer-padding-primary);

    .drawer-title {
        margin-bottom: var(--el-drawer-padding-primary);
    }

    .background-size {
        width: 100%;
        padding: 0px 12px;
    }

    .background-image-item {
        margin: 10px;
        position: relative;

        .close {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1;
            transform: rotate(45deg);
            color: #666;
            font-weight: bold;
        }

        .is-active {
            box-shadow: 0 0 10px #2c9af5a9;
        }

    }

    .background-image-add {
        width: 100%;
        margin: 10px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
    }

    .btn {
        margin-top: 10px;
        margin-left: 0px;
        width: 100%;
    }
}
</style>